<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div id="app">
        <!-- // 1、引用类型的数据使用reactive       -->
        <p>person.name:{{person.name}}</p>
        <p>person.sex:{{person.sex}}</p>
        <p>person.age:{{person.age}}</p>
        <input type="button" value="修改age" @click="changeAge">
        <p>person.wife.age:{{person.wife.age}}</p>
        <input type="button" value="修改wife.age" @click="changeWifeAge">
        <hr/>
        <!--  // 2、引用类型的数据使用ref -->
        <p>book.name:{{book.name}}</p>
        <p>book.price:{{book.price}}</p>
        <input type="button" value="修改价格" @click="changePrice">
        <p>book.author.age:{{book.author.age}}</p>
        <input type="button" value="修改作者的age" @click="changeAuthorAge">
        <hr/>
        <!--   // 3、基本类型使用reactive：不会成为响应式 -->
        <p>msg:{{msg}}</p>
        <input type="button" value="修改Msg" @click="changeMsg">
    </div>
</body>
</html>

<script src="./js/vue.global.js"></script>
<script>    

   // reactive：对应着选项式api中data，一般使用在对象上
   // ref也可以让对象成为响应式的，只不过需要多些一个value。


    const {createApp,ref,reactive} = Vue;

    let app = createApp({
        setup(){

            // reactive()函数会返回代理对象Proxy。
            // 1、引用类型的数据使用reactive
            let person = reactive({
                name:"王义鑫",
                sex:"男",
                age:18,
                wife:{
                    name:"范冰冰",
                    age:16
                }
            });

            console.log("person",person); //Proxy对象

            function changeAge(){
                person.age++;
            }
            function changeWifeAge(){
                person.wife.age++;
            }
           
            // 2、引用类型的数据使用ref
            let book = ref({
                name:"三国演义",
                price:51.2,
                author:{
                    name:"罗贯中",
                    age:108,
                    address:"南窑头国际"
                }
            });

            function changePrice(){
                book.value.price ++;
            }
            function changeAuthorAge(){
                book.value.author.age++;
            }

            // 3、基本类型使用reactive：不会成为响应式
            let msg = reactive("hello");//如果给reactive传入基本类型的数据，那么，返回值就是基本类型
            console.log("msg",typeof msg);//string。肯不是响应式的了

            function changeMsg(){
                msg +="1";
                console.log("changeMsg函数",msg);
            }

            return {
                person,changeAge,changeWifeAge,
                book,changePrice,changeAuthorAge,
                msg,changeMsg
            }
        }
    })

    app.mount("#app");

</script>